<template>
  <el-dialog
    :model-value="modelValue"
    @update:modelValue="onUpdateModelValue"
    @open="$emit('open')"
    @opened="$emit('opened')"
    @close="onClose"
    @closed="$emit('closed')"
    :title="title"
    :width="width"
    :modal="modal"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :draggable="draggable"
    :destroy-on-close="destroyOnClose"
    :lock-scroll="lockScroll"
    :center="center"
    :align-center="alignCenter"
    :top="top"
    :z-index="zIndex"
    :class="['axiom-dialog', `axiom-dialog--${size}`, { 'axiom-dialog--fullscreen': fullscreen }]"
    v-bind="$attrs"
  >
    <template v-if="$slots.header" #header>
      <slot name="header" />
    </template>

    <div class="axiom-dialog__content-wrapper">
      <div v-if="loading" class="axiom-dialog__loading-overlay">
        <AxiomLoading />
      </div>
      <div class="axiom-dialog__content">
        <slot>
          {{ content }}
        </slot>
      </div>
    </div>

    <template v-if="$slots.footer" #footer>
      <slot name="footer" />
    </template>
    <template v-else #footer>
      <div class="axiom-dialog__footer">
        <AxiomButton
          v-if="showCancelButton"
          :loading="cancelLoading"
          @click="handleCancel"
        >
          {{ cancelButtonText }}
        </AxiomButton>
        <AxiomButton
          v-if="showConfirmButton"
          type="primary"
          :loading="confirmLoading"
          @click="$emit('confirm')"
        >
          {{ confirmButtonText }}
        </AxiomButton>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import AxiomButton from './AxiomButton.vue';
import AxiomLoading from './AxiomLoading.vue';

defineOptions({
  name: 'AxiomDialog'
});

const props = defineProps({
  loading: { type: Boolean, default: false },
  modelValue: { type: Boolean, default: false },
  title: { type: String, default: '提示' },
  content: { type: String, default: '' },
  width: { type: [String, Number], default: '50%' },
  top: { type: String, default: '15vh' },
  size: { type: String, default: 'default', validator: (value) => ['small', 'default', 'large'].includes(value) },
  fullscreen: { type: Boolean, default: false },
  modal: { type: Boolean, default: true },
  closeOnClickModal: { type: Boolean, default: true },
  closeOnPressEscape: { type: Boolean, default: true },
  showClose: { type: Boolean, default: true },
  draggable: { type: Boolean, default: false },
  destroyOnClose: { type: Boolean, default: false },
  lockScroll: { type: Boolean, default: true },
  center: { type: Boolean, default: false },
  alignCenter: { type: Boolean, default: false },
  zIndex: { type: Number, default: null },
  showCancelButton: { type: Boolean, default: true },
  showConfirmButton: { type: Boolean, default: true },
  cancelButtonText: { type: String, default: '取消' },
  confirmButtonText: { type: String, default: '确定' },
  cancelLoading: { type: Boolean, default: false },
  confirmLoading: { type: Boolean, default: false }
});

const emit = defineEmits(['update:modelValue', 'open', 'opened', 'close', 'closed', 'cancel', 'confirm']);

const onUpdateModelValue = (value) => {
  emit('update:modelValue', value);
};

const onClose = () => {
  emit('close');
  emit('update:modelValue', false);
};

const handleCancel = () => {
  emit('cancel');
  emit('update:modelValue', false);
};
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-dialog';
</style> 